import { useState } from "react"

export default function FormDemo() {

    const [user,setUser]=useState({
        userName:"admin",
        passWord:"888",
        mobile:"135"
    })

    const handleChange=(e:any)=>{
    
         const {name,value} = e.target;
        setUser({...user,[name]:value})
    }

    // const nameChange=(e:any)=>{
    //     console.log(e);
    //     setUser({...user,userName:e.target.value})
    // }
    // const pwdChange=(e:any)=>{
    //     setUser({...user,passWord:e.target.value})
    // }

    const mobileChange=(e:any)=>{
        setUser({...user,mobile:e.target.value})
    }

    const submit=(e:any)=>{

        console.log("提交数据:",user);

        e.preventDefault(); //阻止表单提交默认事件
    
    }

    return (
        <div>获取表单数据
            <div>
                {user.userName}
            </div>
            <form onSubmit={submit}>
            <div>
                账号:<input value={user.userName} name="userName" onChange={handleChange}></input>
            </div>
            <div>
                密码:<input value={user.passWord} name="passWord" onChange={handleChange}></input>
            </div>
            <div>
                电话:<input value={user.mobile} name="mobile" onChange={mobileChange}></input>
            </div>
            <button onClick={()=>setUser({...user,mobile:'138'})}>修改电话</button>

            <div><button type="submit">注册</button></div>

            </form>

        </div>
    )


}